{% extends "soc/models/edit.html" %}
{% comment %}
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
{% endcomment %}

{% load forms_helpers %}

{% block scripts %}
{{ block.super }}
<script type="text/javascript" src="/soc/content/js/survey-default-text-090627.js"></script>
<script type="text/javascript" src="/jquery/jquery-ui.draggable.js"></script>
<script type="text/javascript" src="/jquery/jquery-ui.sortable.js"></script>
<script type="text/javascript" src="/jquery/jquery-ui.dialog.js"></script>
<script type="text/javascript" src="/jquery/jquery-textarea-expander.js"></script>
<script type="text/javascript" src="/jquery/jquery-editable-1.3.3.js"></script>
<script type="text/javascript" src="/soc/content/js/survey-edit-100927.js"></script>

{% endblock %}


{# cannot add an id for the main form with inheritance #}
{% block body %}
<p> {# TODO: check if can be changed to div #}
<p>
{% block instructions %}
Please use this form to edit the {{ entity_type }}.
{% endblock %}
</p>

{% if error_message %}
  <div class="error">{{ error_message|safe }}</div>
{% endif %}

<form id="EditForm" method="POST">

  <table>
    {% block form_table %}
    {% as_table form %}
    {% endblock %}
  </table>

  <span class="formfieldlabel">Survey content:</span>

<div style="width:100%;">
  <div class="survey_admin" id="survey_widget">
    <table>
      {% block survey_content %}
        {% if survey_form %}
          <tbody>
            {% as_twoline_table survey_form %}
          </tbody>
        {% else %}
          <tbody></tbody>
        {% endif %}
      {% endblock %}
    </table>

    <div id="survey_options">
      {% for type_id, type_info in question_types.items %}
        <button id="{{ type_id }}" class="AddQuestion" onClick="return false;">
          Add {{ type_info|first }} Question
        </button>

        <script type="text/javascript">
  $(document).ready( function() {
    var tooltip = ("<div class='tooltip'><div class='tooltip-body'>" +
    "<img src='/soc/content/images/purrInfo.png' alt='' /><h3>Info</h3>" +
    "<p>Add a {{ type_info|first }} question:<br/> {{ type_info|last }}" +
    "</p></div><div class='tooltip-bottom'></div></div>");
    var tooltip_object=null;
    $('#{{ type_id }}').hover(function() {
      if (tooltip_object==null) {
        tooltip_object = $(tooltip).purr({usingTransparentPNG: true,removeTimer: 10000});
      }
    },
    function() {
      if (tooltip_object!==null) {
        tooltip_object.remove();
        tooltip_object=null;
      }
    });
  });
        </script>

      {% endfor %}
    </div>
  </div> {# end survey_widget #}
  </div>

  <table>
    <tr>
      <td colspan="4">&nbsp;</td>
    </tr>
    <tr>
      {% block submit_buttons %}
        {% block save_button %}
          {% if entity %}
            <td>
              <input style="font-weight: bold" type="submit" value="Save Changes"/>
            </td>
          {% else %}
            <td>
              <input style="font-weight: bold" type="submit" value="Submit"/></span>
            </td>
          {% endif %}
        {% endblock %}
        <td>
          {% if edit_cancel_redirect %}
            <input type="button" onclick="location.href='{{ edit_cancel_redirect }}'" value="Cancel"/>
          {% else %}
            <input type="button" value="Back to Previous Page" onClick="javascript: history.go(-1)">
          {% endif %}
        </td>
        {% if entity %}
          {% block delete_button %}
            <td>
              <input id="button_confirm_delete" type="button" value="Delete" onclick="javascript:melange.form.postDelete(this,'{{ entity_type }}','/{{ entity_type_url|lower }}/delete/{{ entity_suffix }}')" />
            </td>
          {% endblock %}
          {% if export_link %}
            <td>
              <input type="button" onclick="location.href='/{{ entity_type_url|lower }}/export/{{ entity_suffix }}'" value="Export"/>
            </td>
          {% endif %}
          {% ifequal entity.taking_access "mentor evaluation" %}
          <td>
            <input id="activate" {% if not passed_deadline %}class="disabled"{% endif %} onclick="if (!$(this).hasClass('disabled')) location.href='/{{ entity_type_url|lower }}/activate/{{ entity_suffix }}'" type="button"  value="Activate Grades"/>
          </td>
          {% endifequal %}

        {% endif %}
      {% endblock %}
    </tr>
  </table>
  <div id="post_error_container" style="color:red;"></div>

  <input type='hidden' id='delete_item_field' />
  <input type='hidden' id='new_item_field_ul_id' />
  <input type='hidden' id='new_question_button_id' />


  <div id="delete_item_dialog" title="Delete this field?" style="margin: 10px -7px; text-align: center;">
    <p>
      <span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;">
      </span>
   <div style="width:200px;">  This item will be permanently deleted and cannot be recovered. Are you sure?</div>
    </p>
  </div>

</form>

<div id="new_item_dialog" title="Name new option">
  <form>
    <fieldset style="margin: 5px;">

      <label for="new_item_name">Name</label><br>
      <input type="text" name="new_item_name" id="new_item_name"
       class="text ui-widget-content ui-corner-all" value="" />

  </fieldset>
  </form>
</div>

<div id="new_question_dialog" title="Name new question">
  <form>
    <fieldset style="margin: 5px;">

      <label for="new_question_name">ID (link_id-like)</label><br>
      <input type="text" name="new_question_name" id="new_question_name"
       class="text ui-widget-content ui-corner-all" value="" /><br>

      <label for="new_question_content">Title</label><br>
      <input type="text" name="new_question_content" id="new_question_content"
       class="text ui-widget-content ui-corner-all" value="" /><br>

      <div id='question_options_div'>
        <label for="new_question_options">Options</label><br>
        <textarea name="new_question_options"
         id="new_question_options" class="text ui-widget-content ui-corner-all"
         rows="7" cols="20"></textarea><br>
      </div>

     </fieldset>
  </form>
</div>

</p>
{% endblock %}
